@model WidgetTemplateViewModel
@{
    Style.Reqiured("Layout").AtFoot();
}
<div class="panel panel-default">
    <div class="panel-heading">        
        <div class="form-inline">
            <div class="form-group">
                <label for="exampleInputName2">@L("搜索")</label>
                <input id="search" class="form-control" type="text" placeholder="@L("输入关键字进行搜索...")" />
            </div>
            <div class="form-group">
                @L("选择组件，<strong>双击</strong>或者点击<strong>下一步</strong>")
            </div>
        </div>
    </div>
    <div class="panel-body template-list">
        @using (Html.BeginForm("RedirectToWidget", "WidgetTemplate", new { Model.PageID, Model.LayoutID, Model.ZoneID,Model.RuleID, Model.ReturnUrl }))
        {
            foreach (var item in Model.WidgetTemplates.GroupBy(m => m.GroupName).OrderBy(m => m.Key))
            {
                foreach (WidgetTemplateEntity template in item.OrderBy(m => m.Order))
                {
                    <div class="col-lg-2 col-md-3 col-sm-4 thumb-item">
                        <div>
                            <input id="template-@template.ID" type="radio" name="WidgetTemplateID" value="@template.ID" />
                            <label for="template-@template.ID" class="thumbnail">
                                <img src="@Url.Content(template.Thumbnail)" />
                                <span>
                                    @L(template.Title)
                                </span>
                            </label>
                        </div>
                    </div>
                }
            }
            <div class="toolBar">
                <input id="design" type="submit" class="btn btn-primary" value="下一步" />
                @if (Model.CanPasteWidget)
                {
                    <a class="btn btn-warning" href="@Url.Action("PasteAndRedirect", "Widget", new { Model.LayoutID, Model.PageID,Model.ZoneID,Model.ReturnUrl })">
                        <i class="glyphicon glyphicon-paste"></i>
                        @L("粘贴")
                    </a>
                }
                <input type="button" class="btn btn-default cancel" value="@L("取消")" />
            </div>
        }
    </div>
</div>
@using (Script.AtFoot())
{
    <script type="text/javascript">
        $(function () {
            $("input[type=radio]:first").attr("checked", "checked");
            $(document).on("dblclick", function () { $("form").submit(); });
            $(document).on("keyup", "#search", function () {
                var keyWord = $(this).val();
                if (keyWord) {
                    keyWord = keyWord.toLowerCase();
                    $(".thumb-item").each(function () {
                        if ($(this).text().toLowerCase().indexOf(keyWord) < 0) {
                            $(this).addClass("hide");
                        } else {
                            $(this).removeClass("hide");
                        }
                    });
                }
                else {
                    $(".thumb-item.hide").removeClass("hide");
                }
            });
        });
    </script>
}